import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Search extends StatefulWidget {
  Search({super.key});

  @override
  State<Search> createState() => _SearchState();
}

class _SearchState extends State<Search> {
  final myController = TextEditingController();
  //实现聚焦
  late FocusNode myFocusNode;

  @override
  void initState() {
    // TODO: implement initState
    myController.addListener(_printLatestValue);
    super.initState();
    myFocusNode = FocusNode();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    myController.dispose();

    myFocusNode.dispose();
    super.dispose();
  }

  void _printLatestValue() {
    print('Second text field: ${myController.text}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(title: Text('搜索页面')),
      body: Container(
        width: Get.width,
        height: Get.height,
        padding:
            EdgeInsets.fromLTRB(10, MediaQuery.of(context).padding.top, 10, 0),
        color: const Color.fromRGBO(17, 17, 17, 1),
        child: Column(children: [
          //顶部搜索部分
          Input(
            myController: myController,
            myFocusNode: myFocusNode,
          )
        ]),
      ),
    );
  }
}

class Input extends StatelessWidget {
  final TextEditingController myController;
  final FocusNode myFocusNode;
  const Input({
    Key? key,
    required this.myController,
    required this.myFocusNode,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
              flex: 6,
              child: Container(
                color: const Color.fromRGBO(24, 24, 24, 1),
                padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                child: Container(
                  //记住，color属性和decoration属性不能共存
                  decoration: BoxDecoration(
                    color: const Color.fromRGBO(126, 129, 129, 1),
                    borderRadius: BorderRadius.circular(10.0), // 设置圆角边框
                  ),
                  padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
                  height: 40,
                  child: Expanded(
                      flex: 1,
                      child: TextField(
                        autofocus: true, //一旦文本框可见，就将其聚焦
                        focusNode: myFocusNode,
                        //输入框内容变动
                        onChanged: (text) {
                          print('First text field: $text');
                        },
                        controller: myController,
                        decoration: const InputDecoration(
                          fillColor: Colors.red,
                          suffixIcon: Icon(Icons.voice_chat_sharp),
                          icon:
                              Icon(Icons.search, color: Colors.white, size: 20),
                          border: InputBorder.none,
                          hintStyle: TextStyle(color: Colors.white),
                          hintText: '搜索',
                        ),
                      )),
                ),
              )),
          GestureDetector(
            child: const Expanded(
                flex: 1,
                child: Text(
                  '取消',
                  style: TextStyle(color: Colors.blue, fontSize: 17),
                  textAlign: TextAlign.right,
                )),
            onTap: () {
              Get.back();
            },
          ),
        ],
      ),
    );
  }
}
